<template>
   <div>
    <!-- 按钮  -->
    <el-button type="primary" @click="addSwiperFn" v-btnDirective='role'>
      添加轮播图
      <el-icon class="el-icon--right">
        <Plus />
      </el-icon>
    </el-button>
    <!-- 表格 -->
    <el-table :data="currentPageData" style="width: 100%" class="table">
      <!-- 序号 -->
      <el-table-column label="序号" width="80">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 图片 -->
      <el-table-column label="图片">
        <template #default="scope">
          <el-image :src='scope.row.img'></el-image>
        </template>
      </el-table-column>
      <!-- 链接 -->
      <el-table-column label="链接">
        <template #default="scope">
          <span>{{scope.row.link}}</span>
        </template>
      </el-table-column>
      <!-- 提示 -->
      <el-table-column label="提示">
        <template #default="scope">
          <span>{{scope.row.alt}}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" v-model:current-page='currentPage' :total="tableData.length" class='page' />
  </div>
</template>

<script>
// 导入图标
import { Plus } from "@element-plus/icons-vue";
// 导入接口(获取轮播图，删除轮播图,添加轮播图)
import {getSwiper,deleteSwiper,addSwiper} from '@/api/http.js'
// 通过辅助函数获取vuex 中登录时存储的role(当前用户的角色)
import { mapState } from 'vuex'

   export default {
     name:'',
     data () {
       return {
         tableData:[],
         currentPage:1
       };
     },

    //  注册组件
    components:{
      Plus
    },

    // 
    computed:{
      ...mapState(['role']),
      currentPageData(){
        return this.tableData.slice((this.currentPage-1)*10,this.currentPage*10)
      }
    },

    
    created(){
      // 获取，渲染轮播图
      this.getSwiperList()
    },

    methods:{
      //  获取轮播图
      async getSwiperList(){
        const res = await getSwiper()
        this.tableData = res.data.data
      },
      //  删除轮播图
      handleDelete(index,row){
        // 调接口
        deleteSwiper({bannerid:row.bannerid}).then(res=>{
          if(res.data.code==200){
            // 重新获取渲染
            this.getSwiperList()
          }
        })
      },
      //  添加轮播图按钮
       addSwiperFn(){
        // 01-跳转新页面
        this.$router.push('/home/swipermanage/swiperAdd')
        console.log(this.$router)
       },
    }


   }

</script>
<style scoped lang='scss'>
  .el-button{
    margin-bottom: 20px;
  }
.page{
  margin-top: 20px;
  padding-bottom: 30px;
  float: right;
  margin-right: 20px;
}

</style>